<template>
    <div id="wai">
        <div id="one">
            <div id="class" @touchstart="classes"></div>
            
            <div v-for="n in none" id="box">
                <router-link :to="'/user/goodslist/'+n.title">
                    <div>
                        <img :src="n.img">
                        <p>{{n.title}}</p>
                    </div>
                </router-link>
            </div>
        </div>

    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
    data: function() {
        return {
            c: ""
        }
    },
    computed: {
        ...mapState([
            "none"
        ])
    },
    activated:function(){
        this.$store.dispatch("requestnone");
    },
    mounted: function() {
        this.$store.dispatch("requestnone");
    },
    methods: {
        classes: function() {
            location.hash = "/user/shoppingclass"
        },

    }

}
</script>

<style scoped>
#one {
    width: 100%;
    height: 30vh;
    border: solid 1px #dbdbdb;
    border-top: none;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

#box {
    cursor: pointer;
    margin-top: 2vh;
    width: 25%;
    height: 11vh;
    text-align: center;
    font-size: 14px;
}

img {
    width: 10vw;
}

p {
    margin: 0;
}

#class {
    position: absolute;
    width: 15vw;
    height: 10vh;
    /* border:solid 1px black; */
    bottom: 3vh;
    right: 5vw;
}
a{
    text-decoration: none;
    color: black;
}
</style>